<template>
  <div>
    <el-form>
      <el-form-item label="是否可见：">
        <el-switch v-model="data.display"></el-switch>
      </el-form-item>
      <el-form-item label="是否展示详细信息：" label-width="150px">
        <el-switch v-model="data.isdetails"></el-switch>
      </el-form-item>
      <el-form-item label="预约是否弹窗：" label-width="150px">
        <el-switch v-model="data.isshowdialog"></el-switch>
      </el-form-item>
      <el-form-item label="首行高度：" label-width="100px" label-position="left">
        <el-input-number v-model="data.rowStyleHeight" placeholder="首行高度"></el-input-number>
      </el-form-item>
      <el-form-item label="首行宽度：" label-width="100px" label-position="left">
        <el-input-number v-model="data.rowStyleWidth" placeholder="首行宽度"></el-input-number>
      </el-form-item>
      <el-form-item label="首列高度：" label-width="100px" label-position="left">
        <el-input-number v-model="data.columnStyleHeight" placeholder="首列高度"></el-input-number>
      </el-form-item>
      <el-form-item label="首列宽度：" label-width="100px" label-position="left">
        <el-input-number v-model="data.columnStyleWidth" placeholder="首列宽度"></el-input-number>
      </el-form-item>
      <el-form-item label="内容高度：" label-width="100px" label-position="left">
        <el-input-number v-model="data.tableStyleHeight" placeholder="内容高度"></el-input-number>
      </el-form-item>
      <el-form-item label="内容单元格高度：" label-width="130px" label-position="left">
        <el-input-number v-model="data.tableStylecolHeight" placeholder="内容单元格高度"></el-input-number>
      </el-form-item>
      <el-form-item label="内容单元格宽度：" label-width="130px" label-position="left">
        <el-input-number v-model="data.tableStylecolWidth" placeholder="内容单元格宽度"></el-input-number>
      </el-form-item>
      <el-form-item label="首行数据：" label-position="left"><br />
        <el-tabs v-model="data.rowdicOption" stretch @tab-click="handleTabClick">
          <el-tab-pane label="静态数据" name="1">
            <ul tag="ul" :list="rowdicdata" :group="{ name: 'dic' }" ghost-class="ghost" handle=".drag-item"   item-key="label">
              <li v-for="(item, index) in rowdicdata" :key="index">
                <i class="drag-item el-icon-s-operation" style="font-size: 16px; margin: 0 5px; cursor: move"></i>
                <el-input style="margin-right: 5px" size="mini" v-model="item.label" placeholder="label"></el-input>
                <el-input style="margin-right: 5px" size="mini" v-model="item.value" placeholder="value"></el-input>
                <el-input size="mini" v-model="item.id" placeholder="id"></el-input>
                <el-button @click="handleRemoveFields(index,0)" circle plain type="danger" size="mini"
                  icon="el-icon-minus" style="padding: 4px; margin-left: 5px"></el-button>
              </li>
            </ul>
            <div style="margin-left: 22px">
              <el-button @click="handleAddFields(0)">添加列
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="远端数据" name="2">
            网址
            <el-input v-model="data.rowdicUrl" placeholder="远端数据字典网址"></el-input>
            请求方法
            <el-select v-model="data.rowdicMethod" placeholder="请求方法" style="width: 100%" clearable>
              <el-option label="POST" value="post"></el-option>
              <el-option label="GET" value="get"></el-option>
            </el-select>
            表单提交类型
            <el-select v-model="data.rowcontentType" placeholder="表单提交类型" style="width: 100%">
              <el-option label="application/x-www-form-urlencoded"
                value="application/x-www-form-urlencoded"></el-option>
              <el-option label="application/json" value="application/json"></el-option>
              <el-option label="application/pdf" value="application/pdf"></el-option>
              <el-option label="multipart/form-data" value="multipart/form-data"></el-option>
            </el-select>
            请求前缀
            <el-input v-model="data.rowdicUrlPrefix" placeholder="远端数据字典请求前缀"></el-input>
            标签值
            <el-input v-model="data.props.rowlabel" placeholder="远端数据字典网址"></el-input>
            属性值
            <el-input v-model="data.props.rowvalue" placeholder="远端数据字典网址"></el-input>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item label="首列数据：" label-position="left"><br />
        <el-tabs v-model="data.columndicOption" stretch @tab-click="handleTabClick">
          <el-tab-pane label="静态数据" name="3">
            <ul tag="ul" :list="columndicdata" :group="{ name: 'dic' }" ghost-class="ghost" handle=".drag-item">
              <li v-for="(item, index) in columndicdata" :key="index">
                <i class="drag-item el-icon-s-operation" style="font-size: 16px; margin: 0 5px; cursor: move"></i>
                <el-input style="margin-right: 5px" size="mini" v-model="item.label" placeholder="label"></el-input>
                <el-input style="margin-right: 5px" size="mini" v-model="item.value" placeholder="value"></el-input>
                <el-input size="mini" v-model="item.id" placeholder="id"></el-input>
                <el-button @click="handleRemoveFields(index,1)" circle plain type="danger" size="mini"
                  icon="el-icon-minus" style="padding: 4px; margin-left: 5px"></el-button>
              </li>
            </ul>
            <div style="margin-left: 22px">
              <el-button  @click="handleAddFields(1)">添加列
              </el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="远端数据" name="4">
            网址
            <el-input v-model="data.columndicUrl" placeholder="远端数据字典网址"></el-input>
            请求方法
            <el-select v-model="data.columndicMethod" placeholder="请求方法" style="width: 100%" clearable>
              <el-option label="POST" value="post"></el-option>
              <el-option label="GET" value="get"></el-option>
            </el-select>
            表单提交类型
            <el-select v-model="data.columncontentType" placeholder="表单提交类型" style="width: 100%">
              <el-option label="application/x-www-form-urlencoded"
                value="application/x-www-form-urlencoded"></el-option>
              <el-option label="application/json" value="application/json"></el-option>
              <el-option label="application/pdf" value="application/pdf"></el-option>
              <el-option label="multipart/form-data" value="multipart/form-data"></el-option>
            </el-select>
            请求前缀
            <el-input v-model="data.columndicUrlPrefix" placeholder="远端数据字典请求前缀"></el-input>
            标签值
            <el-input v-model="data.props.columnlabel" placeholder="远端数据字典网址"></el-input>
            属性值
            <el-input v-model="data.props.columnvalue" placeholder="远端数据字典网址"></el-input>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item label="远端表格数据：" label-position="left"><br />
        <el-form-item label="网址"><el-input v-model="data.tabDatadicUrl"
            placeholder="远端数据字典网址"></el-input></el-form-item>
        <el-form-item label="请求方法">
          <el-select v-model="data.tabDatadicMethod" placeholder="请求方法" style="width: 100%" clearable>
            <el-option label="POST" value="post"></el-option>
            <el-option label="GET" value="get"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表单提交类型">
          <el-select v-model="data.tabDatacontentType" placeholder="表单提交类型" style="width: 100%">
            <el-option label="application/x-www-form-urlencoded" value="application/x-www-form-urlencoded"></el-option>
            <el-option label="application/json" value="application/json"></el-option>
            <el-option label="application/pdf" value="application/pdf"></el-option>
            <el-option label="multipart/form-data" value="multipart/form-data"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求前缀">
          <el-input v-model="data.tabDatadicUrlPrefix" placeholder="远端数据字典请求前缀"></el-input></el-form-item>
        <el-form-item label="标签值">
          <el-input v-model="data.props.tabDatalabel" placeholder="远端数据字典网址"></el-input></el-form-item>
        <el-form-item label="属性值">
          <el-input v-model="data.props.tabDatavalue" placeholder="远端数据字典网址"></el-input>
        </el-form-item>
      </el-form-item>
      <avue-form :option="dialogOption" v-model="data.showData" key="dialogOption"></avue-form>
      <avue-form :option="cascaderOption" v-model="data.cascaderData" key="cascaderOption"></avue-form>
      <el-form-item label="已预定图示颜色：" label-width="130px" label-position="left">
        <avue-input-color color-format="hex" :show-alpha="false" placeholder="请选择已预定图示颜色"
          v-model="data.reserveColor"></avue-input-color>
      </el-form-item>
      <el-form-item label="当前选择图示颜色：" label-width="140px" label-position="left">
        <avue-input-color color-format="hex" :show-alpha="false" placeholder="请选择当前选择图示颜色："
          v-model="data.selectColor"></avue-input-color>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
  name: 'ConfigYuyue',
  props: ['data', 'widgetForm'],
  components: { Draggable },
  data() {
    return {
      rowdicOption: '1',
      columndicOption: '3',
      rowdicdata: this.data.rowdicData || [],
      columndicdata: this.data.columndicData || [],
      dialogOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: '100',
        column: [
          {
            label: '详情字段设置',
            prop: 'showData',
            type: 'dynamic',
            span: 24,
            labelWidth: '100',
            children: {
              align: 'center',
              headerAlign: 'center',
              column: [
                {
                  label: '表单字段',
                  prop: 'prop',
                  type: 'select',
                  dicData: [],
                  filterable: true,
                }
              ]
            }
          }
        ]
      },
      cascaderOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: '100',
        column: [
          {
            label: '数据关联字段设置',
            prop: 'cascaderData',
            type: 'dynamic',
            span: 24,
            labelWidth: '100',
            children: {
              align: 'center',
              headerAlign: 'center',
              column: [
                {
                  label: '表单字段',
                  prop: 'prop',
                  type: 'select',
                  dicData: [],
                  filterable: true,
                }
              ]
            }
          }
        ]
      }
    }
  },
  mounted() {
    // console.log(this.data)
    console.log(this.widgetForm)
  },
  methods: {
    handleRemoveFields(index, e) {
      if (e === 0) {
        this.rowdicdata.splice(index, 1);
      } else if (e === 1) {
        this.columndicdata.splice(index, 1);
      }

    },
    handleAddFields(e) {
      const i = Math.ceil(Math.random() * 99999);
      if (e === 0) {
        this.rowdicdata.push({ label: `字段${i}`, value: `col_${i}`, id: `${i}` });
      } else if (e === 1) {
        this.columndicdata.push({ label: `字段${i}`, value: `col_${i}`, id: `${i}` });
      }

    },
    handleTabClick(tab) {
      const { name } = tab;
      if (name === '1') {
        this.data.rowdicUrl = '';
        delete this.data.rowdicMethod;
        delete this.data.rowremote;
        this.data.props = {};
        this.rowdicdata = [
          { label: '预约一', value: '0', id: '0' },
          { label: '预约二', value: '1', id: '1' },
          { label: '预约三', value: '2', id: '2' }
        ];
        this.data.rowdicData = [];
      } else if (name === '2') {
        this.data.rowdicUrl = '';
        this.data.rowremote = true;
        delete this.data.rowdicData;
      } else if (name === '3') {
        this.data.columndicUrl = '';
        delete this.data.columndicMethod;
        delete this.data.columnremote;
        this.data.props = {};
        this.columndicdata = [
          { label: '8:00', value: '0', id: '0' },
          { label: '9:00', value: '1', id: '1' },
          { label: '10:00', value: '2', id: '2' }
        ];
        this.data.columndicData = [];
      } else if (name === '4') {
        this.data.columndicUrl = '';
        this.data.columnremote = true;
        delete this.data.columndicData;
      }
    },
  },
  watch: {
    'data.resourceId': function (val) {
      if (val) {
        this.resourceIdChange(val);
      }
    },
    'data.rowdicData': {
      handler(val) {
        console.log(val)
        if (val && val.length > 0 && !Object.is(val, this.rowdicdata)) {
          this.rowdicdata = val;
        }
      },
      deep: true
    },
    'data.columndicData': {
      handler(val) {
        if (val && val.length > 0 && !Object.is(val, this.columndicdata)) {
          this.columndicdata = val;
        }
      },
      deep: true
    },
    rowdicdata: {
      handler(val) {
        this.data.rowdicdata = val;
      },
      deep: true
    },
    columndicdata: {
      handler(val) {
        this.data.columndicdata = val;
      },
      deep: true
    },
    widgetForm: {
      handler(val) {
        if (val) {
          let arr = [];
          if (val.column?.length) {
            for (let col of val.column) {
              if (col.type === 'group' && col.children?.column?.length) {
                for (let col_group of col.children.column) {
                  arr.push({
                    label: col_group.label,
                    value: col_group.prop
                  });
                }
              } else {
                arr.push({
                  label: col.label,
                  value: col.prop
                });
              }
            }
          }
          this.dialogOption.column[0].children.column[0].dicData = arr;
          this.cascaderOption.column[0].children.column[0].dicData = arr;
          // this.$set(this.dialogOption.column[0].children.column[0], 'dicData', arr);
          // this.$set(this.cascaderOption.column[0].children.column[0], 'dicData', arr);
        } else {
          this.dialogOption.column[0].children.column[0].dicData = [];
          this.cascaderOption.column[0].children.column[0].dicData = [];
          // this.$set(this.dialogOption.column[0].children.column[0], 'dicData', []);
          // this.$set(this.cascaderOption.column[0].children.column[0], 'dicData', []);
        }
      },
      deep: true
    }
  }
}
</script>
